<template>
  <div class="order-list">
    <van-tabs 
      @click="onChangeTab" 
      :color="primaryColor" 
      :title-active-color="primaryColor" 
      class="order-tab" 
      v-model="status"
      animated
      style="background: transparent"
    >
      <van-tab v-for="item in orderTabs" :key="item.name" :title="item.title" />
    </van-tabs>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          @offset="10"
        >
          <div 
            v-for="(item, index) in orderlist" 
            :key="index" 
            class="order-item-box"
            @click="$router.push({path: '/orderdetail', query: {id: item.orderNo}})"
          >
            <div class="order-item-header">
              <span>订单时间：{{item.createTime}}</span>
              <span>{{item.orderStatusString}}</span>
            </div>
            <van-card
              v-for="one in item.newBeeMallOrderItemVOS"
              :key="one.orderId"
              :num="one.goodsCount"
              :price="one.sellingPrice"
              desc="全场包邮"
              :title="one.goodsName"
              :thumb="$filters.imgPrefix(one.goodsCoverImg)"
            />
          </div>
        </van-list>
      </van-pull-refresh>
      <ComEmpty v-show="!orderlist.length" />
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {getOrders} from '@/service/order'
import useThemeStore from '@/store/theme'
import {orderTabs} from '@/plugins/mock'

const status = ref('')
const orderlist = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const page = ref(1)
const totalPage = ref(0)

const {primaryColor} = useThemeStore()

// van-list组件onLoad回调
function onLoad() {
  const refreshVal = refreshing.value
  const pageVal = page.value
  if (!refreshVal && pageVal && totalPage.value) {
    page.value = pageVal + 1
  }
  if (refreshVal) {
    orderlist.value = []
    refreshing.value = false
  }
  getOrderlist()
}
// 获取订单列表
async function getOrderlist() {
  const {data, data: {list}} = await getOrders({pageNumber: page.value, status: status.value})
  orderlist.value = orderlist.value.concat(list)
  totalPage.value = data.totalPage
  loading.value = false
  if (page.value >= data.totalPage) finished.value = true
}
// 下拉刷新
function onRefresh() {
  refreshing.value = true
  finished.value = false
  loading.value = true
  page.value = 1
  onLoad()
}
// tabs切换时  【hack】Tab 最好采用点击事件，@click，如果用 @change 事件，会默认进来执行一次
function onChangeTab(name) {
  status.value = name
  onRefresh()
}
</script>

<style lang="less" scoped>
@import '@/assets/style/var.less';
@import '@/assets/style/mixin.less';

.order-list {
  .order-tab {
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
  }
  .skeleton {
    margin-top: 60px;
  }
  .content {
    height: calc(~"(100vh - 70px)");
    overflow: hidden;
    overflow-y: scroll; 
    margin-top: 34px;
    background: @background-p;
  }
  .order-list-refresh {
    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .van-pull-refresh__head {
      background: @background-p;
    }
    .order-item-box {
      margin: 20px 10px;
      border-radius: 8px;
      background-color: @background;
      .order-item-header {
        padding: 10px 20px;
        display: flex;
        font-size: @font-size-p;
        justify-content: space-between;
      }
      .van-card {
        background-color: @background;
        margin-top: 0;
      }
    }
  }
}
</style>